<!--
 * @Author: your name
 * @Date: 2020-03-05 14:19:35
 * @LastEditTime: 2020-03-06 11:27:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-components\demo\src\components\MulSearcher.vue
 -->
<template>
  <div class="item-container" v-if="group!=undefined">
     
    <div class="outer-box">
      <div class="left-box">
        <div class="operate-outer-box">
          <div class="operate-box">
            <el-select
              class="select-way-box select-width"
              size="medium"
              v-model="group.groupOp"
              @change="updateDOM"
              placeholder="请选择逻辑"
            >
              <el-option
                v-for="(item,index) in wayOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button-group class="group-box">
                <el-tooltip class="item" effect="dark" content="添加子组" >
                  <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="addGroup"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="添加规则" >
                  <el-button type="primary" icon="el-icon-plus" size="small" @click="addRule"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除子组" >
                  <el-button type="danger" icon="el-icon-delete" size="small" @click="delGroup" v-if="index!=-1" ></el-button>
                </el-tooltip>
            </el-button-group>
            
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="content-box">
          <div class="rules-box">
            <div class="rules-item" v-for="(item,index) in group.rules" :key="index">
              <el-select
                v-model="item.field"
                class="select-width"
                @change="selectRuleItem(item.field,item)"
                placeholder="请选择字段"
              >
                <el-option
                  v-for="(fielditem,fieldindex) in fieldList"
                  :key="fieldindex"
                  :label="fielditem.Name"
                  :value="fielditem.SqlField"
                ></el-option>
              </el-select>
              <!--  更具item.fieldType类型不同进行展示 -->
              <el-select
                v-model="item.op"
                class="select-width"
                placeholder="请选择方式"
                v-if="item.fieldType==0"
              >
                <el-option
                  v-for="(item,methodsindex) in select_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="item.op"
                class="select-width"
                placeholder="请选择方式"
                v-else-if="item.fieldType==1"
              >
                <el-option
                  v-for="(item,methodsindex) in text_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="item.op"
                class="select-width"
                placeholder="请选择方式"
                v-else-if="item.fieldType==2"
              >
                <el-option
                  v-for="(item,methodsindex) in date_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="item.op"
                class="select-width"
                placeholder="请选择方式"
                v-else-if="item.fieldType==3"
              >
                <el-option
                  v-for="(item,methodsindex) in number_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="item.op"
                class="select-width"
                placeholder="请选择方式"
                v-else-if="item.fieldType==4"
              >
                <el-option
                  v-for="(item,methodsindex) in bool_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-model="item.op"
                class="select-width"
                placeholder="请选择方式"
                v-else-if="item.fieldType==5"
              >
                <el-option
                  v-for="(item,methodsindex) in address_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select v-model="item.op" class="select-width" placeholder="请选择方式" v-else>
                <el-option
                  v-for="(item,methodsindex) in common_methodsList"
                  :key="methodsindex"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!--  更具item.fieldType类型不同进行展示 -->
              <!-- 字段类型 0 选择项 1 文本 2 日期 3 数字 4 布尔 5 地区 6 系统内置 -->
              <div class="value-box">
                <!-- <el-input v-model="item.data" ></el-input> -->
                <el-select
                  v-model="item.data"
                  class="select-width"
                  placeholder="请选择方式"
                  v-if="item.fieldType==0"
                >
                  <el-option
                    v-for="(item,index) in item.sourceList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-input v-model="item.data" class="select-width" v-else-if="item.fieldType==1"></el-input>
                <!-- <el-input v-model="item.data" v-else-if="item.fieldType==2"></el-input> -->
                <el-date-picker
                  v-else-if="item.fieldType==2"
                  v-model="item.data"
                  class="select-width"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
                <el-input v-model="item.data" v-else-if="item.fieldType==3"></el-input>
                <el-select
                  v-model="item.data"
                  class="select-width"
                  placeholder="请选择"
                  v-else-if="item.fieldType==4"
                >
                  <el-option
                    v-for="(item,index) in bool_methodsList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-input v-model="item.data" class="select-width" v-else-if="item.fieldType==5"></el-input>
                <!-- ！！！地区控件 -->
                <el-input v-model="item.data" class="select-width" v-else></el-input>
              </div>
              <div class="del-btn">
                <el-tooltip class="item" effect="dark" content="删除规则" >
                  <el-button
                    type="danger"
                    size="small"
                    circle
                    icon="el-icon-delete"
                    @click="delRule(index)"
                  ></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div class="group-box" v-if="group.groups">
            <div class="group-item">
              <search-item
                :group="searchintem"
                v-for="(searchintem,index ) in group.groups"
                :key="index"
                :index="index"
                @delGroup="delGroupFromChild"
              ></search-item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "SearchItem",
  data() {
    return {
      fieldList: [
        {
          FieldId: "CA03C22E-EE74-4DEA-BE73-9532B981963D",
          TableName: "基本信息",
          Name: "姓名",
          SqlField: "Name",
          Label: "姓名",
          OrderNo: 3,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "7F46992B-3271-4649-8FBB-61D2AA94AC99",
          TableName: "基本信息",
          Name: "身份证号",
          SqlField: "CardNumber",
          Label: "身份证号",
          OrderNo: 8,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "0752EFB9-CB99-47CA-B338-819CE2C2A96C",
          TableName: "基本信息",
          Name: "手机号码",
          SqlField: "MobilePhone",
          Label: "手机号码",
          OrderNo: 17,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "63051FF1-34FA-4525-9119-3BB99D733E64",
          TableName: "基本信息",
          Name: "性别",
          SqlField: "Sex",
          Label: "性别",
          OrderNo: 4,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 0,
          FieldSourceValue: "42B3B11E-48D5-4E2D-BF6C-A980017365D9"
        },
        {
          FieldId: "2FBF9F3E-3DD7-4317-8A6A-B291107719B5",
          TableName: "基本信息",
          Name: "状态",
          SqlField: "StatusCode",
          Label: "状态",
          OrderNo: 11,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 0,
          FieldSourceValue: "F1979E7F-DCC5-407F-8EE6-AAD800C81352"
        },
        {
          FieldId: "3C1B1B38-CC6B-48C6-84A9-12E8054D8ADA",
          TableName: "基本信息",
          Name: "员工工号",
          SqlField: "WorkNumber",
          Label: "员工工号",
          OrderNo: 2,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "55467D2D-D4FE-42D5-8850-0FB2536B45DA",
          TableName: "基本信息",
          Name: "档案ID",
          SqlField: "ArchivesId",
          Label: "档案ID",
          OrderNo: 21,
          IsFreeze: false,
          FieldType: -1,
          FieldSource: 0
        },
        {
          FieldId: "5560D8F8-7503-44B2-A892-4DE43478F8C2",
          TableName: "基本信息",
          Name: "家庭住址",
          SqlField: "FamilyAddress",
          Label: "家庭住址",
          OrderNo: 16,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "5E44AA92-1C64-4264-AAFD-8A7C7C85E132",
          TableName: "基本信息",
          Name: "逝世日期",
          SqlField: "DeadDate",
          Label: "逝世日期",
          OrderNo: 15,
          IsFreeze: false,
          FieldType: 2,
          FieldSource: 1
        },
        {
          FieldId: "5F186413-AF23-4677-B74A-D8608A55191F",
          TableName: "基本信息",
          Name: "出生年月",
          SqlField: "Birthday",
          Label: "出生年月",
          OrderNo: 10,
          IsFreeze: false,
          FieldType: 2,
          FieldSource: 1
        },
        {
          FieldId: "6171AB73-63B6-4793-9C94-428CCDBE026E",
          TableName: "基本信息",
          Name: "科室名称",
          SqlField: "OrganizationName",
          Label: "科室名称",
          OrderNo: 24,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "6634D56D-B689-4235-93DA-ACBCC6990C3A",
          TableName: "基本信息",
          Name: "民族",
          SqlField: "Nation",
          Label: "民族",
          OrderNo: 6,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 0,
          FieldSourceValue: "53AE8DB1-0B2B-4FEC-84DA-AAD500B824B5"
        },
        {
          FieldId: "6A7B791F-C33A-4A06-A365-8711B2BB8AA0",
          TableName: "基本信息",
          Name: "档案地址",
          SqlField: "ArchiveAddressCode",
          Label: "档案地址",
          OrderNo: 18,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 0,
          FieldSourceValue: "7449bd3b-8bca-468b-9772-aad500c5ce41"
        },
        {
          FieldId: "7198CD4B-AD9B-40C7-94C6-5C1170CD0677",
          TableName: "基本信息",
          Name: "员工状态",
          SqlField: "StaffStatus",
          Label: "员工状态",
          OrderNo: 13,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 1,
          FieldSourceValue:
            '{"1":"无","2":"试用期","3":"正式","4":"作废","5":"辞职","6":"辞退","7":"退休","8":"调出"}'
        },
        {
          FieldId: "75B41608-991B-46D3-948B-B018B1DCF1A6",
          TableName: "基本信息",
          Name: "婚配",
          SqlField: "MarryStatusCode",
          Label: "婚配",
          OrderNo: 5,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 0,
          FieldSourceValue: "6da6dca4-def0-4c6c-981a-aafb00e0a65b"
        },
        {
          FieldId: "8F5C66A5-85B9-4B63-8FD7-95617B190398",
          TableName: "基本信息",
          Name: "登记日期",
          SqlField: "CreateDate",
          Label: "登记日期",
          OrderNo: 22,
          IsFreeze: false,
          FieldType: 2,
          FieldSource: 1
        },
        {
          FieldId: "A83230CE-ACD6-4746-A077-9B88CC6E43E5",
          TableName: "基本信息",
          Name: "档案状态",
          SqlField: "HasArchive",
          Label: "档案状态",
          OrderNo: 19,
          IsFreeze: false,
          FieldType: 4,
          FieldSource: 1
        },
        {
          FieldId: "AB49B570-5A30-406E-B489-095318987166",
          TableName: "基本信息",
          Name: "头像",
          SqlField: "HeadImage",
          Label: "头像",
          OrderNo: 25,
          IsFreeze: false,
          FieldType: -1,
          FieldSource: 0
        },
        {
          FieldId: "BA9690E9-4FD5-45AA-9FEA-B26B9E9E7A38",
          TableName: "基本信息",
          Name: "籍贯",
          SqlField: "NativePlace",
          Label: "籍贯",
          OrderNo: 7,
          IsFreeze: false,
          FieldType: 5,
          FieldSource: 1
        },
        {
          FieldId: "D8CA9C2F-0E74-4843-AF59-CD08184315FA",
          TableName: "基本信息",
          Name: "逝世状态",
          SqlField: "IsDead",
          Label: "逝世状态",
          OrderNo: 14,
          IsFreeze: false,
          FieldType: 4,
          FieldSource: 1
        },
        {
          FieldId: "DF5466F0-2ECA-4D28-AB2B-433D4C72B36F",
          TableName: "基本信息",
          Name: "员工编号",
          SqlField: "StaffNumber",
          Label: "员工编号",
          OrderNo: 1,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "EB605F29-C8B8-433B-A735-F7FD932B0E6D",
          TableName: "基本信息",
          Name: "离职理由",
          SqlField: "LeaveReason",
          Label: "离职理由",
          OrderNo: 12,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        },
        {
          FieldId: "09BAF5EB-77A9-492F-A3E0-A0CFCBD9A03E",
          TableName: "合同信息",
          Name: "合同类型",
          SqlField: "ContractTypeCode",
          Label: "合同类型",
          OrderNo: 72,
          IsFreeze: false,
          FieldType: 0,
          FieldSource: 0,
          FieldSourceValue: "8dfb4439-11bf-4747-837a-ab1900b51aba"
        },
        {
          FieldId: "77EE5D77-35C4-49B5-B16B-C4D954D89BF4",
          TableName: "合同信息",
          Name: "合同编号",
          SqlField: "ContractNumber",
          Label: "合同编号",
          OrderNo: 71,
          IsFreeze: false,
          FieldType: 1,
          FieldSource: 0
        }
      ],

      // 下拉框
      select_methodsList: [
        {
          value: "eq",
          label: "等于"
        },
        {
          value: "ne",
          label: "不等于"
        }
      ],
      //文本
      text_methodsList: [
        {
          value: "eq",
          label: "等于"
        },
        {
          value: "ne",
          label: "不等于"
        },
        {
          value: "bw",
          label: "以……开始"
        },
        {
          value: "bn",
          label: "不以……开始"
        },
        {
          value: "ew",
          label: "结束于"
        },
        {
          value: "en",
          label: "不结束于"
        },
        {
          value: "in",
          label: "包括于"
        },
        {
          value: "ni",
          label: "不包括"
        },
        {
          value: "cn",
          label: "包含"
        },
        {
          value: "nc",
          label: "不包含"
        },
        {
          value: "nu",
          label: "空值"
        },
        {
          value: "nn",
          label: "不是空值"
        }
      ],
      //日期
      date_methodsList: [
        {
          value: "lt",
          label: "小于"
        },
        {
          value: "le",
          label: "小于等于"
        },
        {
          value: "gt",
          label: "大于"
        },
        {
          value: "ge",
          label: "大于等于"
        }
      ],
      //数字
      number_methodsList: [
        {
          value: "eq",
          label: "等于"
        },
        {
          value: "ne",
          label: "不等于"
        },
        {
          value: "lt",
          label: "小于"
        },
        {
          value: "le",
          label: "小于等于"
        },
        {
          value: "gt",
          label: "大于"
        },
        {
          value: "ge",
          label: "大于等于"
        }
      ],
      // 布尔
      bool_methodsList: [
        {
          value: "eq",
          label: "等于"
        },
        {
          value: "ne",
          label: "不等于"
        }
      ],
      // 地区
      address_methodsList: [
        {
          value: "eq",
          label: "等于"
        },
        {
          value: "ne",
          label: "不等于"
        }
      ],
      // 系统内置
      common_methodsList: [
        {
          value: "eq",
          label: "是"
        },
        {
          value: "ne",
          label: "不是"
        }
      ],

      methodsList: [
        {
          value: "eq",
          label: "等于"
        },
        {
          value: "ne",
          label: "不等于"
        },
        {
          value: "bw",
          label: "以……开始"
        },
        {
          value: "bn",
          label: "不以……开始"
        },
        {
          value: "ew",
          label: "结束于"
        },
        {
          value: "en",
          label: "不结束于"
        },
        {
          value: "lt",
          label: "小于"
        },
        {
          value: "le",
          label: "小于等于"
        },
        {
          value: "gt",
          label: "大于"
        },
        {
          value: "ge",
          label: "大于等于"
        },
        {
          value: "in",
          label: "包括于"
        },
        {
          value: "ni",
          label: "不包括"
        },
        {
          value: "包含",
          label: "不包含"
        },
        {
          value: "nu",
          label: "空值"
        },
        {
          value: "nn",
          label: "不是空值"
        },
        {
          value: "time",
          label: "在某天"
        }
      ],
      wayOptions: [
        {
          value: "AND",
          label: "并且"
        },
        {
          value: "OR",
          label: "或者"
        }
      ],
      dicList: [
        {
          value: "1243u90u59013502",
          label: "呼伦吞枣"
        },
        {
          value: "1243u90u5901350222",
          label: "厉害得不得了"
        }
      ]
    };
  },
  props: ["group", "index"],
  methods: {
    selectRuleItem(selected, item) {
      console.log("当前选中");
      console.log(selected);
      console.log(item);
      // item.fieldType
      let n = this.fieldList.filter(p => p.SqlField == selected);
      if (n && n.length > 0) {
        item.fieldType = n[0].FieldType;
        item.sourceList = this.dicList;
      }
      this.updateDOM();
    },
    addGroup() {
      console.log("addGroup");
      if (this.group.groups == undefined) {
        Vue.set(this.group, "groups", [
          {
            groupOp: "AND",
            rules: [
              {
                field: "",
                op: "",
                data: "",
                fieldType: -1,
                sourceList: [],
                sourceType: 0
              }
            ]
          }
        ]);
        // this.group.groups = [
        //   {
        //     groupOp: "AND",
        //     rules: [
        //       {
        //         field: "",
        //         op: "",
        //         data: "",
        //         fieldType:-1,
        //         sourceList:[],
        //         sourceType:0,
        //       }
        //     ]
        //   }
        // ];
      } else {
        this.group.groups.push({
          groupOp: "AND",
          rules: [
            {
              field: "",
              op: "",
              data: "",
              fieldType: -1,
              sourceList: [],
              sourceType: 0
            }
          ]
        });
      }
      this.updateDOM();
    },
    updateDOM() {
      this.$forceUpdate();
    },
    addRule() {
      //   debugger;
      console.log("addRule");
      this.group.rules.push({
        field: "",
        op: "",
        data: ""
      });
      this.updateDOM();
    },
    delRule(index) {
      this.group.rules.splice(index, 1);
    },
    delGroup() {
      //   debugger;
      this.$emit("delGroup", this.index);
    },
    delGroupFromChild(index) {
      //   debugger;
      this.group.groups.splice(index, 1);
      if (this.group.groups.length == 0) {
        this.group.groups = undefined;
      }
      this.updateDOM();
    }
  }
};
</script>

<style lang="scss" scoped>
.item-container {
  //   border: 1px solid blue;
  height: 100%;
  margin: 4px;
  // padding-left: 4px;
  padding: 4px;
  .outer-box{
    display: flex;

    .left-box{
      // border: 1px solid purple;
      display: flex;
      justify-self: center;
      align-items: center;

      .operate-outer-box {
        display: flex;
        height: 100%;
         min-width: 160px;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        
        // 操作栏
        .operate-box {
          // margin-top: 10px;
          // border: 1px solid red;
          display: flex;
          flex-direction: column;

          // height: 100%;
          // text-align: left;
           align-items: center; /*定义body的元素垂直居中*/
           justify-content: center; /*定义body的里的元素水平居中*/
          // margin-left: 0;
          .select-way-box {
            width: 80px;
          }
          .group-box{
            margin-top: 6px;
          }
        }
      }
    }
    .right-box{

      .content-box{
        min-width: 600px;
        min-height: 80px;
        display: flex;
        overflow: auto;
        flex-direction: column;
        justify-content: center;
        align-items:flex-start;

        border-left: 1px solid skyblue;
        // margin-left: 10px;
        padding-left: 20px;
        border-radius: 20px;
          // 子组
        .group-box {
            text-align: left;
            // padding-left: 20px;
            //  border: 1px solid purple;
            .group-item {
              margin-top: 6px;
              padding: 4px;
              text-align: left;
            }
        }

        // 同级规则
        .rules-box {
            text-align: left;

            .rules-item {
              margin-top: 4px;
              .value-box {
                  // width:200px;
                  display: inline-block;
              }
              .del-btn {
                  display: inline-block;
              }
            }
        }
      }
    }

  }

  

  

 
  .select-width {
    width: 160px;
  }
}
</style>